<template>
  <section>
    <el-card>
      <el-row>
        <el-col :span="24">
          <div class="table_content" style="margin-bottom: 1px">
            <el-row :gutter="4">
              <el-form :inline="true">
                <el-form-item label="姓名:">
                  <el-input v-model="keyword" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="getTableData()"
                    icon="el-icon-search"
                    >查询
                  </el-button>
                  <el-button
                    type="primary"
                    @click="clear()"
                    icon="el-icon-s-open"
                    >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus-outline"
                    @click="newRoleUser()"
                    >新增
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="back()"
                    >返回
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <div class="table_content">
            <el-row :span="24">
              <el-table rel="multipleSelection" :data="tableData" stripe>
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="100"
                  header-align="center"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="用户名称"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  prop="username"
                  label="用户名"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <!-- <el-table-column
                  label="管理"
                  width="300"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-tooltip content="删除" placement="top"
                      ><el-button
                        size="mini"
                        icon="el-icon-delete"
                        @click="deleteUser(scope.row)"
                      >
                      </el-button
                    ></el-tooltip>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-row>
            <el-dialog
              :visible.sync="showRoleUser"
              title="新增用户列表:"
              width="60%"
              class="userList"
            >
              <el-form :inline="true">
                <el-form-item label="姓名:">
                  <el-input
                    v-model="keyword1"
                    placeholder="请输入姓名"
                    class="mr10 "
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getNotRoleUserList()"
                    >查询
                  </el-button>
                  <el-button
                    type="primary"
                    @click="clear1()"
                    icon="el-icon-s-open"
                    >重置
                  </el-button>
                  <el-button
                    icon="el-icon-folder-add
"
                    type="primary"
                    @click="addNewRoleUser()"
                    >添加
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-arrow-left"
                    @click="back1()"
                    >返回
                  </el-button>
                </el-form-item>
              </el-form>

              <el-row style="text-align: center">
                <el-col :span="24">
                  <el-table
                    :data="userNotList"
                    border
                    stripe
                    ref="multipleTable"
                    highlight-current-row
                    @selection-change="handleSelectionChangePeople"
                    style="width: 100%"
                    class="mt20"
                  >
                    <el-table-column
                      type="selection"
                      width="55"
                    ></el-table-column>
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="50"
                      header-align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="name"
                      label="用户名称"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>

                    <el-table-column
                      prop="username"
                      label="用户名"
                      align="center"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <el-pagination
                    style="margin-top:10px"
                    @current-change="handleCurrentChange"
                    :current-page.sync="resourceUser.currentPage"
                    :page-size="resourceUser.PageSize"
                    layout="total, prev, pager, next"
                    :total="resourceUser.total"
                  >
                  </el-pagination>
                </el-col>
                <el-col class="mt10" :gutter="10"> </el-col>
              </el-row>
            </el-dialog>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
export default {
  name: "disUser",
  created() {
    this.getTableData();
  },
  mounted() {},
  data() {
    return {
      tableData: [],
      keyword: "",
      keyword1: "",
      deptSeleteList: [],
      userNotList: [], //没有当前角色的用户
      valueId: 0, // tree选中id`
      props: {
        // 配置项（必选）
        value: "id",
        label: "name",
        children: "children"
        // disabled:true
      },
      showRoleUser: false,
      value4: [],
      resId: this.$route.query.resId,
      searchDto: {
        deptId: "",
        endTime: "",
        startTime: "",
        pageSize: 10,
        keywords: ""
      },
      searchNotDto: {
        deptId: "",
        endTime: "",
        startTime: "",
        pageSize: 10,
        keywords: ""
      },
      userId: "",
      multipleSelection: [],
      rolePageSize: 10,
      resourceUser: {
        currentPage: 1,
        PageSize: 10,
        total: 100
      }
    };
  },
  methods: {
    //获取没有当前角色的用户
    getNotRoleUserList(params = {}) {
      params.resourceId = this.resId;
      params.type = 1;
      params.name = this.keyword1;
      this.API.getUsersByResourceId(params).then(ret => {
        this.userNotList = ret.data.records;
        this.resourceUser = {
          currentPage: ret.data.current,
          total: ret.data.total
        };
      });
    },
    getSelectTreeValue(value) {
      this.valueId = value;
      this.searchNotDto.deptId = value;
      console.log(this.valueId);
    },
    handleCurrentChange(val) {
      this.getNotRoleUserList({ pageIndex: val });
    },
    handleSizeChanger(val) {
      // console.log("3",val);
      this.rolePageSize = val;
      this.valueId = 0;
      this.getTableData(1);
    },
    handleCurrentChanger(val) {
      // console.log("4",val);
      this.getTableData(val);
    },
    //获取角色下用户
    getTableData() {
      let resourceId = this.resId;
      let type = 0;
      let name = this.keyword;
      this.API.getUsersByResourceId({ resourceId, name, type }).then(ret => {
        this.tableData = ret.data.records;
      });
    },
    //新增用户列表
    newRoleUser() {
      this.showRoleUser = true;
      this.valueId = 0;
      this.searchNotDto.deptId = 0;
      this.searchNotDto.name = "";
      this.multipleSelection = [];
      // this.$refs.multipleTable.clearSelection();
      this.getNotRoleUserList();
    },
    //表格单选事件
    openDetails(row) {
      console.log(row);
      this.userId = row.user_id;
      console.log(this.userId);
    },
    //获取多选用户id
    handleSelectionChangePeople(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        if (this.multipleSelection.indexOf(val[i].user_id) === -1) {
          this.multipleSelection.push(val[i].userId);
        }
      }
      console.log(this.multipleSelection);
    },
    //添加新用户列表
    addNewRoleUser() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          showClose: true,
          message: "请至少选择一个用户",
          type: "error"
        });
        return;
      }
      let body = {
        resourceId: this.resId,
        userIds: this.multipleSelection
      };
      this.API.relationResourceAppUser({ body }).then(ret => {
        console.log(ret.data);
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.multipleSelection = [];
        this.getTableData();
        this.showRoleUser = false;
      });
    },
    //  删除用户
    deleteUser(row) {
      this.$confirm("确认删除当前用户?", "提示", {})
        .then(() => {
          let tem = {
            resId: this.$route.params.resId,
            userId: row.userId
          };
          this.API.deleteRoleUserByUserId(tem).then(ret => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getTableData();
          });
        })
        .catch(() => {});
    },
    back() {
      this.$router.go(-1);
    },
    back1() {
      this.keyword1 = "";
      this.showRoleUser = false;
    },
    clear() {
      this.keyword = "";
      this.getTableData();
    },
    clear1() {
      this.keyword1 = "";
      this.getNotRoleUserList();
    }
  }
};
</script>
<style scoped>
.userList .el-dialog__body {
  padding-top: 0px;
}

.labName > :first-child {
  font-size: 16px;
}
</style>
